<template>
  <div>
    <a-modal v-model:visible="vdata.visible" width="80%" title="选择商户" @ok="okFunc">
      <div class="modal-div">
        <!-- 商户列表 -->
        <div class="modal-div1">
          <div class="search">
            <a-input v-model:value="vdata.searchData.mchNo" class="rate-input" placeholder="搜索商户ID" />
            <a-input v-model:value="vdata.searchData.mchName" class="rate-input" placeholder="搜索商户名称" />
            <a-input v-model:value="vdata.searchData.agentNo" class="rate-input" placeholder="搜索代理商ID" />
            <a-button type="primary" @click="searchFunc"><template #icon><search-outlined /></template>查询</a-button>
            <a-button style="margin-left: 8px" @click="() => vdata.searchData = {} "><reload-outlined />重置</a-button>
          </div>

          <div class="list-table">
            <JeepayTable
              ref="infoTable"
              :initData="false"
              :reqTableDataFunc="reqTableDataFunc"
              :tableColumns="tableColumns"
              :searchData="vdata.searchData"
              rowKey="mchNo"
              :rowSelection="{ type: 'checkbox', selectedRowKeys: vdata.selectRecordIdList, onChange: infoTableSelectChangeFunc }"
              scrollX="100%"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'mchNo'">
                  {{ record.mchNo }}
                </template>
                <template v-if="column.key === 'mchName'">
                  {{ record.mchName }}
                </template>
                <template v-if="column.key === 'agentNo'">
                  {{ record.agentNo }}
                </template>
              </template>
            </JeepayTable>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { API_URL_MCH_LIST, req } from '@/api/manage'
import { reactive, ref, defineExpose, nextTick, getCurrentInstance } from 'vue'

// 定义向父组件 通讯 func 
const emit = defineEmits(['selectFinishFunc'])

const tableColumns = ref([
  { key: 'mchNo', title: '商户号'},
  { key: 'mchName', title: '商户名称'},
  { key: 'agentNo', title: '代理商号'},
])

// 当前 table 组件
const infoTable = ref()

// 响应式数据 
const vdata :any = reactive ({
  visible: false,
  searchData: {},
  selectRecordIdList: []
})

// 请求table接口数据
function reqTableDataFunc (params){
  return req.list(API_URL_MCH_LIST, params)
}

// 表格搜索
function searchFunc () {
  nextTick(() => {
    infoTable.value.refTable(true)
  })
}

// 表格多选
function infoTableSelectChangeFunc(selectedRowKeys, selectedRows) {
  vdata.selectRecordIdList = selectedRowKeys
}

// 选择完毕
function okFunc(){
  emit('selectFinishFunc',  vdata.selectRecordIdList)
}

// 显示
function show (bindList, searchData) {
  vdata.selectRecordIdList = [] // 清空已选择的数据
  if (searchData) {
    vdata.searchData = searchData
  }

  if (bindList) {
    vdata.selectRecordIdList =  JSON.parse(JSON.stringify(bindList))
  }
  
  nextTick(() => {
    searchFunc()
  })

  vdata.visible = true
}

function close(){
  vdata.visible = false
}

// 定义对外输出函数
defineExpose( { show, close } )
</script>

<style scoped lang="less">
.modal-div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;

  .modal-div1 {
    width: 100%
  }

  .list-table {
    border: 1px solid #ddd;
    border-radius: 6px;
  }
}

.search {

  display: flex;
  margin: 10px 0;
  .rate-input {
    width: 200px;
    margin-right: 10px;
  }
}

</style>
